<template>
  <div class="contain">
    <div class="banner">
      <img v-lazy="bannerSrc" alt="">
    </div>
    <div class="net-box">
      <p class="title">{{basicBox[0]["title"]}}</p>
      <img v-lazy="basicBox[0].src" alt="">
    </div>
    <div class="specification">
      <p class="title">{{specification}}</p>
      <ul class="lists">
        <li class="list" v-for="item in specificationList">
          <span class="name">{{item.title}}</span>
          <span class="text">{{item.text}}</span>
        </li>
      </ul>
    </div>
    <div class="features">
      <p class="title">{{features}}</p>
      <ul class="box">
        <li class="item" v-for="item in featureList">
          <img v-lazy="item['src']" alt="">
          <p class="name">{{item['name']}}</p>
        </li>
      </ul>
    </div>
    <div class="client">
      <p class="title">{{suitable}}</p>
      <p class="message">{{suitableText}}</p>
    </div>
    <div class="scenes">
      <p class="title">{{scenes}}</p>
      <ul class="message">
        <li v-for="item in scenesList">
          <img v-lazy="item.src" alt="">
          <p class="title">{{item.title}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        bannerSrc: require('../assets/basic/banner.jpg'),
        basicBox: [
          {
            title: "网络播放盒基础版（型号BY-OTT-RKB）",
            src: require('../assets/basic/basicbox.jpg')
          }
        ],
        specification: "产品规格",
        specificationList: [
          {
            title: "型号",
            text: "BYYB-A20A"
          },
          {
            title: "CPU",
            text: "全志A20双核"
          },
          {
            title: "内存",
            text: "1GB DDR3"
          },
          {
            title: "内置存储器",
            text: "8GB EMMC"
          },
          {
            title: "电源",
            text: "12V"
          },
          {
            title: "操作系统",
            text: "Android 4.2"
          }
        ],
        features: "主要功能",
        featureList: [
          {
            name: "云端发布",
            src: require('../assets/basic/release.png')
          },
          {
            name: "4K输出",
            src: require('../assets/basic/output.png')
          },
          {
            name: "4K解码",
            src: require('../assets/basic/decode.png')
          },
          {
            name: "多媒体支持",
            src: require('../assets/basic/media.png')
          },
          {
            name: "文本显示",
            src: require('../assets/basic/text.png')
          },
          {
            name: "网页展示",
            src: require('../assets/basic/page.png')
          },
          {
            name: "网络直播",
            src: require('../assets/basic/live.png')
          },
          {
            name: "视频监控接入",
            src: require('../assets/basic/monitor.png')
          },
          {
            name: "时间显示",
            src: require('../assets/basic/time.png')
          },
          {
            name: "日期显示",
            src: require('../assets/basic/date.png')
          },
          {
            name: "天气显示",
            src: require('../assets/basic/weather.png')
          },
          {
            name: "实时画面",
            src: require('../assets/basic/real-time.png')
          },
          {
            name: "紧急消息插播",
            src: require('../assets/basic/message.png')
          }
        ],
        suitable: "适用客户",
        suitableText: "需要简单展示信息的个体商铺、连锁店、办公柜台等",
        scenes: "适用场景",
        scenesList: [
          {
            title: "普通广告",
            src: require('../assets/basic/ad.png')
          },
          {
            title: "价目表",
            src: require('../assets/basic/price.png')
          },
          {
            title: "视频监控",
            src: require('../assets/basic/video.png')
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .banner {
    width: 85%;
    margin: 0 auto;
  }

  .banner img, .message img {
    width: 98%;
  }

  .net-box, .specification, .features, .client, .scenes {
    width: 85%;
    margin: 0 auto;
    margin-top: 60px;
  }

  .title {
    font-size: 36px;
    color: #505050;
  }

  .net-box img {
    display: block;
    margin: 100px auto;
    margin-top: 158px;
  }

  .lists, .box {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0;
  }

  .list {
    width: 48%;
    padding: 10px 0;
    border-bottom: 1px solid #d3d3d3;
  }

  .name {
    margin-right: 20px;
  }

  .list .name {
    display: inline-block;
    width: 80px;
    color: #505050;
  }

  .list .text {
    display: inline-block;
    float: right;
    color: #505050;
  }

  .box {
    background: #239df5;
    justify-content: flex-start;
  }

  .item {
    width: 14.28%;
    margin: 30px 0;
  }

  .item img {
    display: block;
    margin: 0 auto;
  }

  .item .name {
    margin: 0;
    margin-top: 30px;
    text-align: center;
    color: #fff;
    font-size: 20px;
  }

  .message {
    font-size: 24px;
    color: #505050;
    margin: 30px 0;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .message .title {
    font-size: 24px;
    text-align: center;
  }
</style>
